<style lang="less" scoped>
  .main_title{
    margin: 0px;
    width: 100%;
    margin-top: 1px;
    background: white;
    .title_shouye{
      cursor:pointer;
      text-align:center;
      height: 3.2vw;
      font-size: 1.2vw;
      color: white;
      line-height: 3.2vw;
      background: #858382;
    }
    .title_tuku{
      cursor:pointer;
      text-align:center;
      height: 3.2vw;
      font-size: 1.2vw;
      color: white;
      line-height: 3.2vw;
      background: #858382;
    }
    .title_sousuo{
      text-align:center;
      height: 3.2vw;
      font-size: 1.2vw;
      color: white;
      line-height: 3.2vw;
      background: #858382;
      padding-left: 2vw;
      padding-right: 15vw;
    }
    .sub-box {
        position: absolute;
        width: 16.66vw;
        background-color: rgba(255,255,255,0.8);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 99;
        // -webkit-transform: translate(-50%, -10%);
        // -moz-transform: translate(-50%, -10%);
        // -ms-transform: translate(-50%, -10%);
        // transform: translate(50%, -10%);
        visibility: hidden;
        opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        // -webkit-transition: .4s ease all;
        // -moz-transition: .4s ease all;
        // -o-transition: .4s ease all;
        transition: .4s ease all;
        overflow: hidden;
        background: white;
    }
     .shouyesub-box {
        position: absolute;
        width: 12.5vw;
        background-color: rgba(255,255,255,0.8);
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 99;
        // -webkit-transform: translate(-50%, -10%);
        // -moz-transform: translate(-50%, -10%);
        // -ms-transform: translate(-50%, -10%);
        // transform: translate(50%, -10%);
        visibility: hidden;
        opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        // -webkit-transition: .4s ease all;
        // -moz-transition: .4s ease all;
        // -o-transition: .4s ease all;
        transition: .4s ease all;
        overflow: hidden;
        background: white;
    }
    .sub-item{
      cursor:pointer;
      text-align: center;
      background: #dededd;
      font-size: 0.9vw;
      height: 2vw;
      color: black;
      line-height: 2vw;
      margin-top: 0.1vw;
    }
    .sub-item:hover{ 
      background: #A9A9A9;
      color: white;
    }
    .title_shouye:hover{
      background: #A9A9A9;
      color: white;
    }
    .title_tuku:hover{
      background: #A9A9A9;
      color: white;
    }
  }
</style>
<template>
  <div class="main_title">
    <el-row :gutter="1">
      <el-col :span="3">
        <div @mouseleave="shouyemouseleave()">
          <div class="title_shouye" ref="shouye" @click="shouye"  @mouseover="shouyemouseover()">首页</div>
          <div class="shouyesub-box"  ref="shouyebox">
              <div class="sub-item" v-for="item in shouyeList" @click="shouyeitem(item.title)">
                {{item.title}}
              </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div @mouseleave="mouseleave()">
          <div class="title_tuku" ref="cailiao"  @mouseover="mouseover()">材料图库</div>
          <div class="sub-box"  ref="cailiaobox">
              <div class="sub-item" v-for="item in gallerymaterials" @click="material(item.id,item.title)">
                {{item.title}}
              </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div @mouseleave="xiliemouseleave()">
          <div class="title_tuku" ref="xilie" @mouseover="xiliemouseover()">设计库</div>
          <div class="sub-box"  ref="xiliebox">
              <div class="sub-item" v-for="item in xilielist" @click="xilieitem(item.title)">
                {{item.title}}
              </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="title_tuku" @click="jishuziliao">技术资料</div>
        <!-- <div @mouseleave="jishumouseleave()">
          <div class="title_tuku" ref="jishu" @mouseover="jishumouseover()">技术资料</div>
          <div class="sub-box"  ref="jishubox">
              <div class="sub-item" v-for="item in jishulist" @click="jishuitem(item.title)">
                {{item.title}}
              </div>
          </div>
        </div> -->
      </el-col>
      <el-col :span="9">
        <div class="title_sousuo">
          <el-input size="medium " placeholder="请输入内容" v-model="input2" v-if="issousuo">
            <el-button slot="append"  @click="sousuo">搜索</el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { materialgallerymaterials } from '@/request/api';
export default {
  data() {
    return {
      isv : false,
      input2:'',
      gallerymaterials:[],
      issousuo:true,
      shouyeList:[{title:'研究院简介'},{title:'基地素材'}],
      xilielist:[{title:'系列图库'},{title:'参考图库'},{title:'经典案例'}],
      jishulist:[{title:'技术手册'},{title:'CAD图库'},{title:'检测报告'},{title:'设计视频'},{title:'安装视频'},{title:'内部资料'}],
    }
  },
  mounted() {
    this.getmaterialgallerymaterials();
  },
  methods: {
    mouseleave(){
      var div =  this.$refs.cailiaobox;
      this.mouseleaveno(div);
    },
    mouseover(){
      var i = this.gallerymaterials.length*2.1;
      var div =  this.$refs.cailiaobox;
      this.mouseleaveok(i,div);
    },
    shouyemouseleave(){
      var div =  this.$refs.shouyebox;
      this.mouseleaveno(div);
    },
    shouyemouseover(){
      var i = this.shouyeList.length*2.1;
      var div =  this.$refs.shouyebox;
      this.mouseleaveok(i,div);
    },
    xiliemouseleave(){
      var div =  this.$refs.xiliebox;
      this.mouseleaveno(div);
    },
    xiliemouseover(){
      var i = this.xilielist.length*2.1;
      var div =  this.$refs.xiliebox;
      this.mouseleaveok(i,div);
    },
    jishumouseleave(){
      var div =  this.$refs.jishubox;
      this.mouseleaveno(div);
    },
    jishumouseover(){
      var i = this.jishulist.length*2.1;
      var div =  this.$refs.jishubox;
      this.mouseleaveok(i,div);
    },
    mouseleaveno(div){
      div.style.opacity = 0;
      div.style.visibility = 'hidden';
      div.style.height = '0px';
    },
    mouseleaveok(i,div){
      div.style.opacity = 1;
      div.style.visibility = 'visible';
      div.style.height = i+"vw";
    },
    xilietuku(){
      this.$router.push({ name: 'jlb_xilie' });
    },
    shouye(){
      this.$router.push({ name: 'jlb_main'});
      // let routeUrl = this.$router.resolve({
      //   path: '/',
      // });
      // window.open(routeUrl.href, '_blank');
    },
    //跳转材料列表
    material(id,title){
      if(window.location.href.indexOf("jlb_cailiao") != -1){
        this.input2 = "";
        this.$emit('cailiao',id,title);
      }else{
        let routeUrl = this.$router.resolve({
          path: 'jlb_cailiao',
          query: {'id': id,'title':title}
        });
        window.open(routeUrl.href, '_blank');
      }
    },
    shouyeitem(title){
      switch(title){
        case '研究院简介':
          this.$router.push({ name: 'jlb_jianjie' });
          break;
        case '基地素材':
          this.$router.push({ name: 'jlb_jdsc' });
          break;
      }
    },
    xilieitem(title){
      switch(title){
        case '系列图库':
          this.$router.push({ name: 'jlb_xilie' });
          break;
        case '参考图库':
          this.$router.push({ name: 'jlb_cankaolist' });
          break;
        case '经典案例':
          this.$router.push({ name: 'jlb_anlilist' });
          break;
      }
    },
    jishuitem(title){
      switch(title){
        case 'CAD图库':
          this.$router.push({ name: 'jlb_cad' });
          break;
        case '技术手册':
          this.$router.push({ name: 'jlb_manual' });
          break;
      }
    },
    jishuziliao(){
      this.$router.push({ name: 'jlb_manual' });
    },
    //材料列表
    getmaterialgallerymaterials(){
      materialgallerymaterials({}).then(res => {
        console.log(res.data);
          if(res.ok){
              this.gallerymaterials = res.data;
          }
      })
    },
    sousuo(){
      this.$emit('sousuo',this.input2);
    },
    setinput2(input){
      this.input2 = input;
    },
    setissousuo(is){
      this.issousuo = is;
    }
  },
  components: {
        
  },

}
</script>
